<template>
  <div>
    <section>
      <div class="history">
        <div class="title">
          <h3>历史记录</h3>
          <van-icon name="delete" @click="clearHistory" />
        </div>
        <div class="box">
          <van-tag plain v-for="(item,index) in history" :key="index" @click="onSearch(item)">{{item}}</van-tag>
        </div>
      </div>
      <div class="history">
        <div class="title">
          <h3>热门搜索</h3>
        </div>
        <div class="box">
          <van-tag
            plain
            v-for="(items,index) in hot"
            :key="index"
            :class="items.is_hot == 1 ? 'active' : ''"
            @click="onSearch(items.keyword)"
          >{{items.keyword}}</van-tag>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { getSearchData, clearHistory } from "@/request/api";

export default {
  props: {
    history: {},
    hot: {}
  },
  data() {
    return {};
  },
  methods: {
    clearHistory() {
      clearHistory().then(res => {
        if(res.errno == 0){
          this.$toast.success('删除成功')
        }
      });
    },
    onSearch(e){
      // 子穿父 更改 input 值
      this.$emit('changeInput',e)
      // vuex 更改显示状态
      this.$store.commit("changeBlockShow", 3);
      // vuex 异步操作
      this.$store.dispatch('AsyncChangePopGoodList',{keyword:e})
    }
  }
};
</script>

<style lang="less" scoped>
section {
  .history {
    margin-top: 10px;
    padding: 0 5%;
    border-bottom: 10px solid #f6f6f6;
    .title {
      font-size: 18px;
      height: 40px;
      line-height: 40px;
      h3 {
        float: left;
        font-weight: normal;
        margin: 0;
      }
      .van-icon {
        float: right;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .box {
    .van-tag {
      font-size: 14px;
      margin: 10px 5px 5px 0;
    }
    .active {
      color: red;
    }
  }
}
</style>